<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>我的评论 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      min-height: 100vh;
      margin: 0;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    .nav-btn.primary {
      color: #2196f3;
      font-weight: 500;
    }
    
    /* 样式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #2196f3;
      color: white;
    }
    
    /* 通用评论页面样式 */
    .comments-page {
      display: none;
      padding-bottom: 20px;
    }
    
    .comments-page.active {
      display: block;
    }
    
    /* 评论筛选器 */
    .comment-filter {
      display: flex;
      background-color: #fff;
      border-bottom: 1px solid #eee;
    }
    
    .filter-item {
      flex: 1;
      padding: 12px;
      text-align: center;
      font-size: 15px;
      color: #666;
      cursor: pointer;
    }
    
    .filter-item.active {
      color: #2196f3;
      border-bottom: 2px solid #2196f3;
    }
    
    /* 评论项基础样式 */
    .comment-item {
      background-color: #fff;
      padding: 15px;
      border-bottom: 1px solid #f5f7fa;
    }
    
    .comment-header {
      display: flex;
      margin-bottom: 10px;
    }
    
    .comment-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .comment-author {
      font-weight: 500;
      font-size: 15px;
      margin-bottom: 3px;
    }
    
    .comment-time {
      font-size: 12px;
      color: #999;
    }
    
    .comment-content {
      font-size: 15px;
      line-height: 1.4;
      margin-bottom: 10px;
    }
    
    .comment-target {
      padding: 10px;
      background-color: #f5f7fa;
      border-radius: 8px;
      font-size: 14px;
      margin-bottom: 10px;
    }
    
    .comment-actions {
      display: flex;
      color: #666;
      font-size: 14px;
    }
    
    .comment-action {
      display: flex;
      align-items: center;
      margin-right: 20px;
      cursor: pointer;
    }
    
    .comment-action i {
      margin-right: 5px;
    }
    
    /* 空状态 */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      color: #999;
      text-align: center;
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 20px;
      opacity: 0.3;
    }
    
    .empty-text {
      font-size: 16px;
      margin-bottom: 10px;
    }
    
    .empty-subtext {
      font-size: 14px;
      margin-bottom: 20px;
    }
    
    /* 样式1 - 标准列表 */
    .standard-comments {
      background-color: #f5f7fa;
    }
    
    .standard-comments .comment-item {
      border-radius: 0;
    }
    
    .standard-comments .comment-actions {
      justify-content: flex-end;
    }
    
    /* 样式2 - 气泡样式 */
    .bubble-comments {
      padding: 15px;
    }
    
    .bubble-comments .comment-item {
      border-radius: 12px;
      margin-bottom: 15px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    }
    
    .bubble-comments .comment-header {
      align-items: flex-start;
    }
    
    .bubble-comments .comment-bubble {
      background-color: #f0f7ff;
      padding: 12px 15px;
      border-radius: 18px 18px 18px 4px;
      max-width: calc(100% - 60px);
    }
    
    .bubble-comments .comment-content {
      margin-bottom: 0;
    }
    
    /* 样式3 - 紧凑样式 */
    .compact-comments {
      background-color: #fff;
    }
    
    .compact-comments .comment-item {
      padding: 12px 15px;
      display: flex;
    }
    
    .compact-comments .comment-avatar {
      flex-shrink: 0;
    }
    
    .compact-comments .comment-body {
      flex: 1;
    }
    
    .compact-comments .comment-meta {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
    }
    
    .compact-comments .comment-author {
      margin-bottom: 0;
      margin-right: 10px;
    }
    
    .compact-comments .comment-content {
      font-size: 14px;
      margin-bottom: 5px;
    }
    
    .compact-comments .comment-target {
      padding: 5px 8px;
      font-size: 13px;
      margin-bottom: 5px;
    }
    
    /* 样式4 - 标签式布局 */
    .tab-comments {
      background-color: #fff;
    }
    
    .tab-comments .comment-tabs {
      display: flex;
      border-bottom: 1px solid #eee;
    }
    
    .tab-comments .comment-tab {
      flex: 1;
      padding: 12px;
      text-align: center;
      font-size: 15px;
      color: #666;
      cursor: pointer;
    }
    
    .tab-comments .comment-tab.active {
      color: #2196f3;
      border-bottom: 2px solid #2196f3;
    }
    
    .tab-comments .tab-content {
      display: none;
    }
    
    .tab-comments .tab-content.active {
      display: block;
    }
    
    .tab-comments .comment-item {
      border-radius: 0;
    }
    
    /* 搜索框 */
    .search-box {
      padding: 10px 15px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px;
      background-color: #f5f7fa;
      border: none;
      border-radius: 8px;
      font-size: 15px;
      box-sizing: border-box;
    }
    
    .search-input:focus {
      outline: none;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
    
    /* 动画 */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">我的评论</h1>
    <a href="#" class="nav-btn primary" id="editBtn">编辑</a>
  </nav>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="standard">标准列表</div>
      <div class="style-tab" data-style="bubble">气泡样式</div>
      <div class="style-tab" data-style="compact">紧凑样式</div>
      <div class="style-tab" data-style="tab">标签式布局</div>
    </div>
  </div>
  
  <!-- 样式1 - 标准列表 -->
  <div class="comments-page active" id="standard">
    <div class="search-box">
      <input type="text" class="search-input" placeholder="搜索我的评论...">
    </div>
    
    <div class="comment-filter">
      <div class="filter-item active">全部</div>
      <div class="filter-item">收到的回复</div>
      <div class="filter-item">最近一周</div>
    </div>
    
    <div class="standard-comments">
      <div class="comment-item">
        <div class="comment-header">
          <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="comment-avatar">
          <div>
            <div class="comment-author">我</div>
            <div class="comment-time">2023-06-15 14:30</div>
          </div>
        </div>
        
        <div class="comment-content">
          这个摄影作品真不错，构图和光线处理得很专业，请问用的是什么相机拍摄的？
        </div>
        
        <div class="comment-target">
          <strong>回复 @旅行摄影师:</strong> 分享一组上周在海边拍摄的日落照片
        </div>
        
        <div class="comment-actions">
          <div class="comment-action" onclick="showToast('已点赞')">
            <i class="fa fa-thumbs-o-up"></i> 24
          </div>
          <div class="comment-action" onclick="showToast('回复评论')">
            <i class="fa fa-reply"></i> 回复
          </div>
          <div class="comment-action" onclick="showToast('已删除')">
            <i class="fa fa-trash-o"></i> 删除
          </div>
        </div>
      </div>
      
      <div class="comment-item">
        <div class="comment-header">
          <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="comment-avatar">
          <div>
            <div class="comment-author">我</div>
            <div class="comment-time">2023-06-12 09:15</div>
          </div>
        </div>
        
        <div class="comment-content">
          我也去过这个地方，确实很美，特别是秋天的时候，枫叶全红了，特别适合拍照！
        </div>
        
        <div class="comment-target">
          <strong>回复 @户外爱好者:</strong> 分享一下周末徒步的美景
        </div>
        
        <div class="comment-actions">
          <div class="comment-action" onclick="showToast('已点赞')">
            <i class="fa fa-thumbs-o-up"></i> 8
          </div>
          <div class="comment-action" onclick="showToast('回复评论')">
            <i class="fa fa-reply"></i> 回复
          </div>
          <div class="comment-action" onclick="showToast('已删除')">
            <i class="fa fa-trash-o"></i> 删除
          </div>
        </div>
      </div>
      
      <div class="comment-item">
        <div class="comment-header">
          <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="comment-avatar">
          <div>
            <div class="comment-author">我</div>
            <div class="comment-time">2023-06-10 20:45</div>
          </div>
        </div>
        
        <div class="comment-content">
          这个食谱太棒了，按照步骤做出来非常美味，谢谢分享！
        </div>
        
        <div class="comment-target">
          <strong>回复 @美食达人:</strong> 家常红烧肉的做法，简单易学
        </div>
        
        <div class="comment-actions">
          <div class="comment-action" onclick="showToast('已点赞')">
            <i class="fa fa-thumbs-o-up"></i> 36
          </div>
          <div class="comment-action" onclick="showToast('回复评论')">
            <i class="fa fa-reply"></i> 回复
          </div>
          <div class="comment-action" onclick="showToast('已删除')">
            <i class="fa fa-trash-o"></i> 删除
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式2 - 气泡样式 -->
  <div class="comments-page" id="bubble">
    <div class="search-box">
      <input type="text" class="search-input" placeholder="搜索评论...">
    </div>
    
    <div class="bubble-comments">
      <div class="comment-item">
        <div class="comment-header">
          <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="comment-avatar">
          <div class="comment-bubble">
            <div class="comment-author">我 <span class="comment-time">昨天 14:30</span></div>
            <div class="comment-content">
              这个摄影作品真不错，构图和光线处理得很专业，请问用的是什么相机拍摄的？
            </div>
          </div>
        </div>
        
        <div style="margin-left: 50px; margin-top: 10px;">
          <div class="comment-target">
            <strong>旅行摄影师</strong> 分享了一组上周在海边拍摄的日落照片
          </div>
          
          <div style="margin-top: 10px; padding-left: 10px; border-left: 2px solid #eee;">
            <div class="comment-header">
              <img src="https://picsum.photos/seed/user2/100/100" alt="用户头像" class="comment-avatar" style="width: 36px; height: 36px;">
              <div class="comment-bubble" style="background-color: #f5f5f5;">
                <div class="comment-author">旅行摄影师 <span class="comment-time">昨天 15:10</span></div>
                <div class="comment-content">
                  谢谢你的喜欢，我用的是索尼A7M3搭配24-70mm F2.8镜头拍摄的
                </div>
              </div>
            </div>
          </div>
          
          <div class="comment-actions" style="margin-top: 10px; margin-left: 46px;">
            <div class="comment-action" onclick="showToast('已点赞')">
              <i class="fa fa-thumbs-o-up"></i> 24
            </div>
            <div class="comment-action" onclick="showToast('回复评论')">
              <i class="fa fa-reply"></i> 回复
            </div>
          </div>
        </div>
      </div>
      
      <div class="comment-item">
        <div class="comment-header">
          <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="comment-avatar">
          <div class="comment-bubble">
            <div class="comment-author">我 <span class="comment-time">3天前</span></div>
            <div class="comment-content">
              我也去过这个地方，确实很美，特别是秋天的时候，枫叶全红了，特别适合拍照！
            </div>
          </div>
        </div>
        
        <div style="margin-left: 50px; margin-top: 10px;">
          <div class="comment-target">
            <strong>户外爱好者</strong> 分享了周末徒步的美景
          </div>
          
          <div class="comment-actions" style="margin-top: 10px; margin-left: 46px;">
            <div class="comment-action" onclick="showToast('已点赞')">
              <i class="fa fa-thumbs-o-up"></i> 8
            </div>
            <div class="comment-action" onclick="showToast('回复评论')">
              <i class="fa fa-reply"></i> 回复
            </div>
          </div>
        </div>
      </div>
      
      <div class="comment-item">
        <div class="comment-header">
          <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="comment-avatar">
          <div class="comment-bubble">
            <div class="comment-author">我 <span class="comment-time">5天前</span></div>
            <div class="comment-content">
              这个食谱太棒了，按照步骤做出来非常美味，谢谢分享！
            </div>
          </div>
        </div>
        
        <div style="margin-left: 50px; margin-top: 10px;">
          <div class="comment-target">
            <strong>美食达人</strong> 分享了家常红烧肉的做法
          </div>
          
          <div class="comment-actions" style="margin-top: 10px; margin-left: 46px;">
            <div class="comment-action" onclick="showToast('已点赞')">
              <i class="fa fa-thumbs-o-up"></i> 36
            </div>
            <div class="comment-action" onclick="showToast('回复评论')">
              <i class="fa fa-reply"></i> 回复
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式3 - 紧凑样式 -->
  <div class="comments-page" id="compact">
    <div class="search-box">
      <input type="text" class="search-input" placeholder="查找评论">
    </div>
    
    <div class="compact-comments">
      <div class="comment-item">
        <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="comment-avatar">
        <div class="comment-body">
          <div class="comment-meta">
            <div class="comment-author">我</div>
            <div class="comment-time">2023-06-15</div>
          </div>
          
          <div class="comment-content">
            这个摄影作品真不错，构图和光线处理得很专业，请问用的是什么相机拍摄的？
          </div>
          
          <div class="comment-target">
            回复 @旅行摄影师 的帖子
          </div>
          
          <div class="comment-actions">
            <div class="comment-action" onclick="showToast('已点赞')">
              <i class="fa fa-thumbs-o-up"></i> 24
            </div>
            <div class="comment-action" onclick="showToast('有3条回复')">
              <i class="fa fa-reply"></i> 3
            </div>
          </div>
        </div>
      </div>
      
      <div class="comment-item">
        <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="comment-avatar">
        <div class="comment-body">
          <div class="comment-meta">
            <div class="comment-author">我</div>
            <div class="comment-time">2023-06-12</div>
          </div>
          
          <div class="comment-content">
            我也去过这个地方，确实很美，特别是秋天的时候，枫叶全红了，特别适合拍照！
          </div>
          
          <div class="comment-target">
            回复 @户外爱好者 的帖子
          </div>
          
          <div class="comment-actions">
            <div class="comment-action" onclick="showToast('已点赞')">
              <i class="fa fa-thumbs-o-up"></i> 8
            </div>
            <div class="comment-action" onclick="showToast('有0条回复')">
              <i class="fa fa-reply"></i> 0
            </div>
          </div>
        </div>
      </div>
      
      <div class="comment-item">
        <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="comment-avatar">
        <div class="comment-body">
          <div class="comment-meta">
            <div class="comment-author">我</div>
            <div class="comment-time">2023-06-10</div>
          </div>
          
          <div class="comment-content">
            这个食谱太棒了，按照步骤做出来非常美味，谢谢分享！
          </div>
          
          <div class="comment-target">
            回复 @美食达人 的帖子
          </div>
          
          <div class="comment-actions">
            <div class="comment-action" onclick="showToast('已点赞')">
              <i class="fa fa-thumbs-o-up"></i> 36
            </div>
            <div class="comment-action" onclick="showToast('有1条回复')">
              <i class="fa fa-reply"></i> 1
            </div>
          </div>
        </div>
      </div>
      
      <div class="comment-item">
        <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="comment-avatar">
        <div class="comment-body">
          <div class="comment-meta">
            <div class="comment-author">我</div>
            <div class="comment-time">2023-06-08</div>
          </div>
          
          <div class="comment-content">
            请问这个活动什么时候开始报名？需要什么条件吗？
          </div>
          
          <div class="comment-target">
            回复 @活动组织者 的帖子
          </div>
          
          <div class="comment-actions">
            <div class="comment-action" onclick="showToast('已点赞')">
              <i class="fa fa-thumbs-o-up"></i> 5
            </div>
            <div class="comment-action" onclick="showToast('有2条回复')">
              <i class="fa fa-reply"></i> 2
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式4 - 标签式布局 -->
  <div class="comments-page" id="tab">
    <div class="tab-comments">
      <div class="comment-tabs">
        <div class="comment-tab active" data-tab="all">全部评论</div>
        <div class="comment-tab" data-tab="replied">收到回复</div>
        <div class="comment-tab" data-tab="liked">获赞较多</div>
      </div>
      
      <!-- 全部评论 -->
      <div class="tab-content active" data-tab="all">
        <div class="search-box">
          <input type="text" class="search-input" placeholder="搜索所有评论...">
        </div>
        
        <div class="comment-item">
          <div class="comment-header">
            <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="comment-avatar">
            <div>
              <div class="comment-author">我</div>
              <div class="comment-time">2023-06-15 14:30</div>
            </div>
          </div>
          
          <div class="comment-content">
            这个摄影作品真不错，构图和光线处理得很专业，请问用的是什么相机拍摄的？
          </div>
          
          <div class="comment-target">
            <strong>回复 @旅行摄影师:</strong> 分享一组上周在海边拍摄的日落照片
          </div>
          
          <div class="comment-actions">
            <div class="comment-action" onclick="showToast('已点赞')">
              <i class="fa fa-thumbs-o-up"></i> 24
            </div>
            <div class="comment-action" onclick="showToast('回复评论')">
              <i class="fa fa-reply"></i> 回复
            </div>
          </div>
        </div>
        
        <div class="comment-item">
          <div class="comment-header">
            <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="comment-avatar">
            <div>
              <div class="comment-author">我</div>
              <div class="comment-time">2023-06-12 09:15</div>
            </div>
          </div>
          
          <div class="comment-content">
            我也去过这个地方，确实很美，特别是秋天的时候，枫叶全红了，特别适合拍照！
          </div>
          
          <div class="comment-target">
            <strong>回复 @户外爱好者:</strong> 分享一下周末徒步的美景
          </div>
          
          <div class="comment-actions">
            <div class="comment-action" onclick="showToast('已点赞')">
              <i class="fa fa-thumbs-o-up"></i> 8
            </div>
            <div class="comment-action" onclick="showToast('回复评论')">
              <i class="fa fa-reply"></i> 回复
            </div>
          </div>
        </div>
      </div>
      
      <!-- 收到回复 -->
      <div class="tab-content" data-tab="replied">
        <div class="comment-item">
          <div class="comment-header">
            <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="comment-avatar">
            <div>
              <div class="comment-author">我</div>
              <div class="comment-time">2023-06-15 14:30</div>
            </div>
          </div>
          
          <div class="comment-content">
            这个摄影作品真不错，构图和光线处理得很专业，请问用的是什么相机拍摄的？
          </div>
          
          <div style="padding: 10px; background-color: #f0f7ff; border-radius: 8px; font-size: 14px; margin: 10px 0;">
            <div style="display: flex; margin-bottom: 5px;">
              <img src="https://picsum.photos/seed/user2/100/100" alt="用户头像" style="width: 24px; height: 24px; border-radius: 50%; margin-right: 8px;">
              <div>
                <div style="font-weight: 500;">旅行摄影师</div>
                <div style="font-size: 12px; color: #999;">2023-06-15 15:10</div>
              </div>
            </div>
            <div>谢谢你的喜欢，我用的是索尼A7M3搭配24-70mm F2.8镜头拍摄的</div>
          </div>
          
          <div class="comment-actions">
            <div class="comment-action" onclick="showToast('已点赞')">
              <i class="fa fa-thumbs-o-up"></i> 24
            </div>
            <div class="comment-action" onclick="showToast('回复评论')">
              <i class="fa fa-reply"></i> 回复
            </div>
          </div>
        </div>
        
        <div class="comment-item">
          <div class="comment-header">
            <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="comment-avatar">
            <div>
              <div class="comment-author">我</div>
              <div class="comment-time">2023-06-10 20:45</div>
            </div>
          </div>
          
          <div class="comment-content">
            这个食谱太棒了，按照步骤做出来非常美味，谢谢分享！
          </div>
          
          <div style="padding: 10px; background-color: #f0f7ff; border-radius: 8px; font-size: 14px; margin: 10px 0;">
            <div style="display: flex; margin-bottom: 5px;">
              <img src="https://picsum.photos/seed/user3/100/100" alt="用户头像" style="width: 24px; height: 24px; border-radius: 50%; margin-right: 8px;">
              <div>
                <div style="font-weight: 500;">美食达人</div>
                <div style="font-size: 12px; color: #999;">2023-06-11 08:30</div>
              </div>
            </div>
            <div>很高兴你喜欢，这个做法确实很简单，而且味道很好</div>
          </div>
          
          <div class="comment-actions">
            <div class="comment-action" onclick="showToast('已点赞')">
              <i class="fa fa-thumbs-o-up"></i> 36
            </div>
            <div class="comment-action" onclick="showToast('回复评论')">
              <i class="fa fa-reply"></i> 回复
            </div>
          </div>
        </div>
      </div>
      
      <!-- 获赞较多 -->
      <div class="tab-content" data-tab="liked">
        <div class="comment-item">
          <div class="comment-header">
            <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="comment-avatar">
            <div>
              <div class="comment-author">我</div>
              <div class="comment-time">2023-06-10 20:45</div>
            </div>
          </div>
          
          <div class="comment-content">
            这个食谱太棒了，按照步骤做出来非常美味，谢谢分享！我还加了一点八角和桂皮，味道更香浓了，大家也可以试试～
          </div>
          
          <div class="comment-target">
            <strong>回复 @美食达人:</strong> 家常红烧肉的做法，简单易学
          </div>
          
          <div class="comment-actions">
            <div class="comment-action" onclick="showToast('已点赞')" style="color: #f44336;">
              <i class="fa fa-thumbs-up"></i> 36
            </div>
            <div class="comment-action" onclick="showToast('回复评论')">
              <i class="fa fa-reply"></i> 回复
            </div>
          </div>
        </div>
        
        <div class="comment-item">
          <div class="comment-header">
            <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="comment-avatar">
            <div>
              <div class="comment-author">我</div>
              <div class="comment-time">2023-06-15 14:30</div>
            </div>
          </div>
          
          <div class="comment-content">
            这个摄影作品真不错，构图和光线处理得很专业，请问用的是什么相机拍摄的？另外想请教一下后期用的是什么软件，色调处理得很舒服
          </div>
          
          <div class="comment-target">
            <strong>回复 @旅行摄影师:</strong> 分享一组上周在海边拍摄的日落照片
          </div>
          
          <div class="comment-actions">
            <div class="comment-action" onclick="showToast('已点赞')" style="color: #f44336;">
              <i class="fa fa-thumbs-up"></i> 24
            </div>
            <div class="comment-action" onclick="showToast('回复评论')">
              <i class="fa fa-reply"></i> 回复
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const commentsPages = document.querySelectorAll('.comments-page');
    const backBtn = document.getElementById('backBtn');
    const editBtn = document.getElementById('editBtn');
    const toast = document.getElementById('toast');
    const filterItems = document.querySelectorAll('.filter-item');
    const commentTabs = document.querySelectorAll('.comment-tab');
    const tabContents = document.querySelectorAll('.tab-content');
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        commentsPages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 筛选器切换
    filterItems.forEach(item => {
      item.addEventListener('click', function() {
        filterItems.forEach(i => i.classList.remove('active'));
        this.classList.add('active');
        showToast(`已筛选：${this.textContent}`);
      });
    });
    
    // 标签页切换
    commentTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        const tabName = this.getAttribute('data-tab');
        
        // 更新标签
        commentTabs.forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        
        // 更新内容
        tabContents.forEach(content => {
          content.classList.remove('active');
        });
        document.querySelector(`.tab-content[data-tab="${tabName}"]`).classList.add('active');
      });
    });
    
    // 返回按钮
    backBtn.addEventListener('click', function() {
      showToast('返回上一页');
    });
    
    // 编辑按钮
    editBtn.addEventListener('click', function() {
      showToast('编辑模式已开启');
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.opacity = '0';
        setTimeout(() => {
          toast.style.display = 'none';
          toast.style.opacity = '1';
        }, 300);
      }, 2000);
    }
  </script>
</body>
</html>
